<template>
  <div id="app">
    <el-menu router :default-active="currentNav" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item index="1" :route="{path: '/'}">首页</el-menu-item>
      <el-menu-item index="2" :route="{path: '/transfer'}">转账</el-menu-item>
    </el-menu>

    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        routerMap: {
          '/': '1',
          '/transfer': '2'
        }
      }
    },
    computed: {
      currentNav () {
        return this.routerMap[this.$route.path]
      }
    }
  }
</script>

<style lang="stylus">
@import './assets/iconfont/iconfont.css';
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  /*text-align center*/
  color #2c3e50

.el-menu.el-menu--horizontal
  border-bottom: none
  display flex
  justify-content center




</style>
